<template>
	<view>
		<!-- F1:搜索栏 -->
		<xz-search-bar></xz-search-bar>
		<!-- F2:轮播广告 -->
		<view class="swiper-box">
			<swiper indicator-dots autoplay :interval="3000" :duration="1000" indicator-active-color="#0aa1ed" circular>
				<swiper-item v-for="(c,i) in carouselItems" :key="i.cid">
					<view class="swiper-item">
						<image :src="$url.base + c.img" mode="widthFix" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- F3:首页推荐 -->
		<uni-card margin="20rpx 0" padding="0" spacing="0">
			<!-- 自定义的卡片头部 -->
			<view slot="title" class="card-title">
				<image src="/static/img/computer_icon.png" mode="widthFix" />
				<view>首页推荐 / 1F</view>
				<navigator open-type="navigate" url="../product-list/product-list">更多</navigator>
			</view>
			<!-- 卡片主体——网格布局容器  square：每个网格是否显示为正方形-->
			<uni-grid :column="2" :showBorder="false" :square="false">
				<uni-grid-item v-for="p in recommendedItems" :key="p.pid">
					<uni-card margin="10rpx" padding="0" spacing="0">
						<view class="product">
							<!-- 顶部：图片 -->
							<image :src="$url.base+p.pic" mode="scaleToFill" />
							<!-- 中部：标题 -->
							<view class="title">{{p.title}}</view>
							<!-- 底部：价格+按钮 -->
							<view class="bottom">
								<text>￥{{p.price}}</text>
								<button type="primary" size="mini">查看详情</button>
							</view>
						</view>
					</uni-card>
				</uni-grid-item>
			</uni-grid>
		</uni-card>
		<!-- F4:最新上架 -->
		<uni-card margin="20rpx 0" padding="0" spacing="0">
			<!-- 自定义的卡片头部 -->
			<view slot="title" class="card-title">
				<image src="/static/img/computer_icon.png" mode="widthFix" />
				<view>最新上架 / 2F</view>
				<navigator open-type="navigate" url="../product-list/product-list">更多</navigator>
			</view>
			<!-- 卡片主体——网格布局容器  square：每个网格是否显示为正方形-->
			<uni-grid :column="2" :showBorder="false" :square="false">
				<uni-grid-item v-for="p in newArrivalItems" :key="p.pid">
					<uni-card margin="10rpx" padding="0" spacing="0">
						<view class="product">
							<!-- 顶部：图片 -->
							<image :src="$url.base+p.pic" mode="scaleToFill" />
							<!-- 中部：标题 -->
							<view class="title">{{p.title}}</view>
							<!-- 底部：价格+按钮 -->
							<view class="bottom">
								<text>￥{{p.price}}</text>
								<button type="primary" size="mini">查看详情</button>
							</view>
						</view>
					</uni-card>
				</uni-grid-item>
			</uni-grid>
		</uni-card>
		<!-- F5:热销单品 -->
		<uni-card margin="20rpx 0" padding="0" spacing="0">
			<!-- 自定义的卡片头部 -->
			<view slot="title" class="card-title">
				<image src="/static/img/computer_icon.png" mode="widthFix" />
				<view>热销单品 / 3F</view>
				<navigator open-type="navigate" url="../product-list/product-list">更多</navigator>
			</view>
			<!-- 卡片主体——网格布局容器  square：每个网格是否显示为正方形-->
			<uni-grid :column="2" :showBorder="false" :square="false">
				<uni-grid-item v-for="p in topSaleItems" :key="p.pid">
					<uni-card margin="10rpx" padding="0" spacing="0">
						<view class="product">
							<!-- 顶部：图片 -->
							<image :src="$url.base+p.pic" mode="scaleToFill" />
							<!-- 中部：标题 -->
							<view class="title">{{p.title}}</view>
							<!-- 底部：价格+按钮 -->
							<view class="bottom">
								<text>￥{{p.price}}</text>
								<button type="primary" size="mini">查看详情</button>
							</view>
						</view>
					</uni-card>
				</uni-grid-item>
			</uni-grid>
		</uni-card>
		<!-- F6:底部菜单/版权 -->
		<xz-footer></xz-footer>
		<!-- F7:页签栏 -->

		<!-- F8:返回顶部（固定定位） -->
		<xz-go-top></xz-go-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carouselItems: [], //轮播广告数据
				recommendedItems: [], //首页推荐数据
				newArrivalItems: [], //新品上架数据
				topSaleItems: [], //热销单品数据
			}
		},
		onLoad() {
			// 页面加载时，异步请求服务器端首页数据
			uni.showLoading({
				title: '内容加载中...',

			})
			let url = this.$url.indexData
			console.log(url)
			uni.request({
				url,
				success: res => {
					this.carouselItems = res.data.carouselItems
					this.recommendedItems = res.data.recommendedItems
					this.newArrivalItems = res.data.newArrivalItems
					this.topSaleItems = res.data.topSaleItems
				},
				fail: err => {
					console.log(err)
				},
				complete: () => {
					uni.hideLoading()
				}

			})
		}
	}
</script>

<style lang="scss">
	page {
		// 渐变背景色（背景图片）
		background-image: linear-gradient(180deg, $xz-theme 40px, $uni-bg-color-grey 180px);

		.swiper-box {
			padding: 5rpx 20rpx;

			swiper {
				border-radius: 10rpx;
				overflow: hidden;
				height: 284rpx; //根据图片的宽高等比例计算得来的

				image {
					width: 100%; //710rpx
				}
			}
		}

		.card-title {
			display: flex;
			align-items: center;
			padding: 20rpx 20rpx;
			border-bottom: 1px solid $uni-border-color;

			image {
				width: 55rpx;
			}

			view {
				flex: 1;
				margin: 0 20rpx;
			}

			text {
				color: #aaa;
				font-size: $uni-font-size-sm;
			}
		}

		.product {
			padding: 10rpx;
			text-align: center;
			font-size: $uni-font-size-sm;

			image {
				width: 90%;
				height: 210rpx;
			}

			.title {
				text-align: left;
				//文本仅显示一行，溢出的隐藏并用...代替
				white-space: nowrap; //单词在空格处：不换行
				overflow: hidden; //内容溢出的话：隐藏
				text-overflow: ellipsis; //溢出的文本用省略号代替
			}

			.bottom {
				display: flex;
				align-items: center;

				text {
					flex: 1;
					text-align: left;
					color: $uni-color-primary;
				}

				button {
					padding: 0 15rpx;
				}
			}
		}
	}
</style>
